<template functional>
  <a-menu-item-group
    v-if="props.menuInfo.type === 'group'"
    :key="props.menuInfo.key || props.menuInfo.path || props.menuInfo.name"
  >
    <span slot="title">
      <s-icon v-if="props.menuInfo.icon" :type="props.menuInfo.icon" />
      <span style="line-height: 40px">{{ props.menuInfo.name }}</span>
    </span>
    <s-sub-menu
      v-for="menu in props.menuInfo.children || []"
      :key="menu.key"
      :menu-info="menu"
    />
  </a-menu-item-group>
  <a-sub-menu
    v-else-if="props.menuInfo.children"
    :key="props.menuInfo.key || props.menuInfo.path || props.menuInfo.name"
  >
    <span slot="title">
      <s-icon v-if="props.menuInfo.icon" :type="props.menuInfo.icon" />
      <span>{{ props.menuInfo.name }}</span>
    </span>
    <s-sub-menu
      v-for="menu in props.menuInfo.children || []"
      :key="menu.key"
      :menu-info="menu"
    />
  </a-sub-menu>
  <a-menu-item
    v-else
    :key="props.menuInfo.key || props.menuInfo.path || props.menuInfo.name"
  >
    <s-icon v-if="props.menuInfo.icon" :type="props.menuInfo.icon" />
    <span>{{ props.menuInfo.name }}</span>
  </a-menu-item>
</template>

<script>
export default {
  name: "SSubMenu",
  props: {
    menuInfo: {
      default: () => {
        return {};
      }
    }
  }
};
</script>

<style scoped></style>
